import { useNavigate } from 'react-router-dom'
import React, { useEffect } from 'react'

interface IProps {
  allow: boolean
  redirectTo: string
  children: React.ReactNode
}

// allow 表示是否需要登录，true表示需要登录，false表示不需要登录
// redirectTo 表示如果未登录，跳转到哪个页面
// children 表示如果登录了，渲染哪个页面
export default function RequireAuth({ allow, redirectTo, children }: IProps) {
  const navigate = useNavigate()
  // 查看本地是否有token，如果token存在，测表示登录
  const isLogined = localStorage.getItem('token') ? true : false
  useEffect(() => {
    // 如果需要登录，但是没有登陆，则需要跳转到登录页面
    // 如果需要跳转的页面不需要登录，且已经登录了（属于不正常跳转），跳转到首页
    if (allow !== isLogined) {
      navigate(redirectTo)
    }
  }, [allow, isLogined, navigate, redirectTo])
  // 如果登录了，返回children
  // 如果未登录，返回null
  return allow === isLogined ? <>{children}</> : null
}
